<template>
	<view>
		<view :style="{'height':zhanwei+'px','background-color':zwColor}" class="fxd"></view>
		<view class="content">
			<image class="banner" src="../../static/banner.png" @tap="toPage" :data-url="initInfo.award"></image>
		</view>
		<screenBar ref="screenBar" :cntHeight="cntHeight" :top="top" :isFiexd="isFiexd"></screenBar>
		<view class="listView" :style="{'min-height':scH+'px'}" >
			<view :style="{'height':hgt+'px'}" v-if="rmdList.length<1">
				<emptyBox :isLoding="loding"></emptyBox>
			</view>
			<groupList :list="rmdList"></groupList>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import groupList from "@/components/groupList/groupList.vue";
	import screenBar from "@/components/screenBar2/screenBar2.vue";
	export default {
		components:{groupList,screenBar},
		computed: {
			...mapState({
				locationCity:state=>state.map.locationCity,
				roads:state=>state.map.roads,
				selectCity:state=>state.map.selectCity,
				initInfo:state=>state.sys.initInfo
			})
		
		},
		data() {
			return {
				isFiexd: false,
				cntHeight: uni.getSystemInfoSync().statusBarHeight,
				top: 0,
				zwColor:'rgba(0,0,0,0)',
				scHeight: uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().windowBottom - uni.upx2px(90),
				zhanwei:uni.getSystemInfoSync().statusBarHeight,
				hgt:uni.getSystemInfoSync().windowHeight,
				rmdList:[],
				rmdFilter:{
					page_no:1,
					page_size:10,
					areaId:3201,
				},
				hasNext:true,
				scH:uni.getSystemInfoSync().screenHeight,
				loding:true
			};
		},
		methods:{
			getRmd(){
				if(this.hasNext){
					this.loding=true;
					this.$store.dispatch("apiGetGroupList",this.rmdFilter).then(res=>{
						if(res.data.data.items.length>0){
							this.rmdList=this.rmdList.concat(res.data.data.items)
							this.rmdFilter.page_no=res.data.data.nextPage;
							this.hasNext=res.data.data.hasNext
							this.loding=false;
						}else{
							this.loding=false;
						}
						
					})
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
				
			},
		},
		onLoad() {
			var _this = this;
			this.rmdFilter.areaId=this.selectCity.cityCode
			this.getRmd();
			// 监听区域选择
			uni.$on("changeArea2",payload=>{
				this.rmdList=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				this.rmdFilter.areaId=payload.areaId
				delete this.rmdFilter.streetId
				this.getRmd()
			})
			// 监听商圈选择
			uni.$on("changeStreet2",payload=>{
				this.rmdList=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				this.rmdFilter.streetId=payload.streetId,
				// delete this.rmdFilter.areaId
				this.rmdFilter.areaId=payload.areaId.toString().substr(0,4)
				this.getRmd()
			})
			// 监听距离排序
			uni.$on("rankChange2",payload=>{
				this.rmdList=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				if(payload.type==0){
					delete this.rmdFilter.orderBy;
					delete this.rmdFilter.longi;
					delete this.rmdFilter.lati;
				}else{
					this.rmdFilter.orderBy=payload.type
					if(payload.type==5){
						this.rmdFilter.longi=this.roads.longitude;
						this.rmdFilter.lati=this.roads.latitude;
					}else{
						delete this.rmdFilter.longi;
						delete this.rmdFilter.lati;
					}
				}
				// console.log(this.rmdFilter);
				this.getRmd()
			})
			// 监听分类选择
			uni.$on("classChange2",payload=>{
				this.rmdList=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				if(payload.type=='firCate'){
					delete 	this.rmdFilter.secCate;
					delete 	this.rmdFilter.thirCate;
					this.rmdFilter.firCate=payload.firCate;
					
				}else if(payload.type=='secCate'){
					delete 	this.rmdFilter.thirCate;
					this.rmdFilter.firCate=payload.firCate;
					this.rmdFilter.secCate=payload.secCate;
				}else{
					this.rmdFilter.firCate=payload.firCate;
					this.rmdFilter.secCate=payload.secCate;
					this.rmdFilter.thirCate=payload.thirCate;
				}
				
				this.getRmd()
			})
			// 监听筛选选择
			uni.$on("changeScreen2",payload=>{
				this.rmdList=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				if(payload.hasOwnProperty('type')){
					this.rmdFilter.type=payload.type
				}else{
					delete this.rmdFilter.type
				}
				if(payload.hasOwnProperty('percent')){
					this.rmdFilter.percent=payload.percent
				}else{
					delete this.rmdFilter.percent
				}
				if(payload.hasOwnProperty('age')){
					this.rmdFilter.age=payload.age
				}else{
					delete this.rmdFilter.age
				}
				if(payload.hasOwnProperty('price1')){
					this.rmdFilter.price1=payload.price1
				}else{
					delete this.rmdFilter.price1
				}
				if(payload.hasOwnProperty('price2')){
					this.rmdFilter.price2=payload.price2
				}else{
					delete this.rmdFilter.price2
				}
				this.getRmd()
				
			})
			
			// 获取筛选条浮动高度
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.select('.content').boundingClientRect(data => {
					this.cntHeight = data.height-uni.getSystemInfoSync().statusBarHeight
				}).exec();
			}, 500)
			
			uni.$on('toPageScroll2', () => {
				uni.pageScrollTo({
					scrollTop: _this.cntHeight,
					duration: 300
				});
			})
		},
		// 设置筛选条是否为固定定位
		onPageScroll(e) {
			this.top = e.scrollTop
			if (e.scrollTop >= this.cntHeight || this.$refs.screenBar.show) {
				this.isFiexd = true
				this.zwColor="#ffffff"
			} else {
				this.isFiexd = false
				this.zwColor="rgba(0,0,0,0)"
			}
		},
		// 页面滚动到底部
		onReachBottom() {
			if(this.hasNext){
				this.getRmd()
			}else{
				uni.showToast({
					title: '没有更多的数据了',
					icon: 'none'
				});
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.rmdFilter={
				page_no:1,
				page_size:10,
				areaId:this.selectCity.cityCode,
			}
			this.hasNext=true;
			this.loding=true;
			this.rmdList=[];
			setTimeout(() => {
				this.getRmd()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.fxd{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 9999999;
	}
	page{
		background-color: #F7F7F7;
	}
	.banner{
		width: 100%;
		height: 240upx;
		display: block;
	}
	.content{
		padding: 0;
	}
</style>
